<template>
    <div>
        <div style="cursor: pointer"  @click="()=>copy2text(`【${returnPhrase[0]}】`)">
            {{returnPhrase[0]}}
        </div>
        <div style="cursor: pointer" @click="()=>copy2text(`【${translation[0]}】`)">
            翻译：{{translation[0]}}
        </div>
        <div v-if="basic">
            <div>基本解释</div>
            <div style="cursor: pointer" @click="()=>copy2text(`【${basic.explains[0]}】`)">
                {{basic.explains[0]}}
            </div>
        </div>
        <div v-if="web">
            <div>网络解释</div>
            <ul>
                <li v-for="item in web" style="cursor: pointer" @click="()=>copy2text(`【${item.key+':'+item.value[0]}】`)">
                    {{item.key}}<br/>
                    {{item.value[0]}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import {copy2bang} from '../../utils/utils';
    import {getUrlParamNative} from "../../utils/utils";

    export default {
        data() {
            return {
                returnPhrase: "",
                web: [
                    /*          {
                                  "value": [
                                      "And l love her"
                                  ],
                                  "key": "我爱她"
                              }*/
                ],
                translation: "",
                basic: {
                    phonetic: "",//拼音
                    explains: []//介绍
                }
            }
        },
        mounted() {
            this.keyword = getUrlParamNative('keyword')
            this.translate()
        },
        methods: {
            copy2text(str){
                copy2bang(str)
                this.$message("复制成功")
            },
            async translate() {
                axios.get(`/story/translate?keyword=${this.keyword}`).then(res=>res.data).then(res=>{
                    this.$data.returnPhrase=res.content.returnPhrase
                    this.$data.web=res.content.web
                    this.$data.translation=res.content.translation
                    this.$data.basic=res.content.basic
                })
            }

        }
    }
</script>